<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted, onUpdated, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
const { proxy } = getCurrentInstance()

/* ---- */
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forFees = proxy.$Fees || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const user = reactive({
  title: '',
  // ----
  num: 0,
  allFees: 0
})
// ----
let users = []
// ----
const navs = [{
  name: '用户',
  style: { width: '28%' }
}, {
  name: '金额'
}, {
  name: '时间',
  style: { width: '24%' }
}, {
  name: '上级',
  style: { width: '28%' }
}]
// --mescroll--
const noData = proxy.$Global.noData
let mescroll = null
const items = ref([])

/* ---- */
const layer = ref()
const layerBox = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// ----
const getCurrencyInfo = async (callback) => {
  // -- 获取充值项目信息 --
  forFees.some((item) => {
    if (String(item.id) === String(proxy.$route.query.id)) user.title = proxy.$Myfun.setText(item.name)
  })
  // --获取所有用户信息 & 充值成功金额数--
  const forUserData = {
    params: {
      page: 1,
      PageSize: 1000000000000
    }
  }
  const forFrmData = {
    params: {
      'JobsAccountSearch[pay_type]': proxy.$route.query.id,
      'JobsAccountSearch[status]': '充值成功',
      // ----
      page: 1,
      PageSize: 1000000000000
    }
  }
  await proxy.$Axios.all([
    proxy.$Axios.get('dealer/index', forUserData),
    proxy.$Axios.get('jobs-account/index', forFrmData)
  ]).then(proxy.$Axios.spread((userData, frmData) => {
    // --所有用户信息--
    const userItems = []
    userData.items.forEach((item, index) => {
      userItems.push({
        id: item.id,
        telphone: item.telphone,
        parent_dealer_id: item.parent_dealer_id
      })
    })
    users = userItems
    // --获取充值成功金额数--
    user.num = frmData._meta.totalCount
    let forFees = 0
    frmData.items.forEach((item) => {
      forFees += Number(item.amount)
    })
    user.allFees = forFees.toFixed(2)
  })).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // --设置网页title--
  const forTitle = user.title ? ('【' + user.title + '】报名充值信息') : document.title
  setAppTitle(forTitle)
  // ----
  callback && callback()
}
// --getData--
const startMeScroll = () => {
  mescroll = new MeScroll(proxy.$refs.dataScroll, {
    up: {
      callback: getListData,
      isBounce: false,
      page: { num: 0, size: 20 },
      htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
      noMoreSize: 10,
      toTop: {
        src: '/pics/mescroll-totop.png',
        offset: 1000
      },
      empty: {
        warpId: proxy.$refs.dataList,
        tip: noData
      }
    }
  })
}
const getListData = (page) => {
  getListDataFromNet({
    forUrl: 'jobs-account/index',
    forData: {
      params: {
        'JobsAccountSearch[pay_type]': proxy.$route.query.id,
        'JobsAccountSearch[status]': '充值成功',
        // ----
        sort: 'SORT_DESC',
        // ----
        page: page.num,
        PageSize: page.size
      }
    }
  }, page.num, page.size, (curPageData) => {
    setListData(curPageData).then((result) => {
      mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
      items.value = items.value.concat(result)
    })
  }, (resMsg) => {
    mescroll.endErr()
    proxy.$Myfun.forToast(layer.value, 'open', resMsg)
  })
}
const getListDataFromNet = (option, pageNum, pageSize, successCallback, errorCallback) => {
  if (Number(pageNum) === 1) {
    if (document.querySelector('.upwarp-nodata')) { document.querySelector('.upwarp-nodata').style.visibility = 'hidden' }
    items.value = []
  }
  // ----
  proxy.$http.get(option.forUrl, option.forData).then((res) => {
    successCallback && successCallback(res.items)
  }).catch((err) => { errorCallback && errorCallback(err) })
}
const setListData = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let forUser = {}
    users.some((theItem) => {
      if (String(theItem.id) === String(item.dealer_id)) forUser = theItem
    })
    // ----
    let forUserFather = {}
    users.some((theItem) => {
      if (String(theItem.id) === String(forUser.parent_dealer_id)) forUserFather = theItem
    })
    // ----
    newItems.push({
      id: item.id,
      telphone: forUser.telphone,
      fathertelphone: forUserFather.telphone,
      amount: item.amount,
      date: proxy.$Myfun.getDateShort(item.created_at),
      styleOne: { width: '28%' },
      styleThree: { width: '24%' },
      styleFour: { width: '28%' }
    })
  }
  return newItems
}
const divScroll = (event) => { proxy.$Myfun.setImgToTop() }

/* ---- */
onMounted(() => {
  getCurrencyInfo(() => {
    // --创建MeScroll对象--
    setTimeout(() => { startMeScroll() }, 500)
  })
})
onUpdated(() => { nextTick(() => { proxy.$Myfun.setSectionH() }) })
onBeforeRouteLeave(() => { if (mescroll) mescroll.destroy() })
</script>

<template>
  <div>
    <header class="xw-bg-gray">
      <div class="xw-msg xw-bgCL-11 xw-flex xw-flex-align xw-flex-justify">
        <span>累计金额：{{user.allFees}}元</span>
        <span>报名人数：{{user.num}}人</span>
      </div>
      <div class="list-box">
        <ul>
          <li>
            <div v-for="(item, index) in navs" :style="item.style">{{item.name}}</div>
          </li>
        </ul>
      </div>
    </header>
    <div class="xw-section">
      <div ref="dataScroll" class="mescroll" @scroll="divScroll">
        <div class="list-cash" ref="dataList">
          <ul class="xw-bg-white">
            <li v-for="(item, index) in items">
              <div :style="item.styleOne">{{item.telphone}}</div>
              <div>{{item.amount}}</div>
              <div :style="item.styleThree">{{item.date}}</div>
              <div :style="item.styleFour">{{item.fathertelphone}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <layer-view ref="layer"/>
    <layer-view ref="layerBox"/>
  </div>
</template>

<style scoped>
/* ---- */
.list-box ul { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.list-box ul li { display: table-row; border-style: solid; border-color: #d7d7d7; border-width: 0 0 1px; }
.list-box ul li div { display: table-cell; padding: 0.5rem; line-height: 2.5rem; vertical-align: middle; word-wrap: break-word; word-break: break-all; border-style: solid; border-color: #d7d7d7; border-width: 0 0 0 1px; text-align: center; }
.list-box ul li div:nth-of-type(1) { border-width: 0; }

/* ---- */
.list-cash ul { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.list-cash ul li { display: table-row; border-style: solid; border-color: #d7d7d7; border-width: 0 0 1px; }
.list-cash ul li div { display: table-cell; padding: 0.5rem; line-height: 2.5rem; font-size: 1.3rem; vertical-align: middle; word-wrap: break-word; word-break: break-all; border-style: solid; border-color: #d7d7d7; border-width: 0 0 0 1px; text-align: center; }
.list-cash ul li div:nth-of-type(1) { border-width: 0; }
</style>
